<!--
    学习计划
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 学习计划管理
        div.establish
          img(src="/static/studyPlan/u12777.png")
          span(@click="studyPlan") 创建学习计划
        div.center
          div.ulTitle
            template.eltemplate
              el-table(:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              stripe
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              ).el-table
                el-table-column(label="序号" width="150")
                  template(slot-scope="scope")
                    span {{ scope.$index + 1 }}
                el-table-column(prop="name" label="名称" width="280")
                el-table-column(prop="classHour" label="创建时间" width="300")
                el-table-column(label="操作" width="150").right
                  template(slot-scope="scope")
                    el-button(@click="handleClick(scope.row)" type="text" size="small") 查看
                    el-button(type="text" @click="studyPlan" size="small") 编辑
                    el-button(@click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small") 移除
          div.paging
            el-pagination(
            @size-change="handleSizeChange"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next, total, jumper"
            :total="total")
    div.black(ref="black")
    div.black-box(ref="blacks")
      span.establish 创建学习计划
      div.selectDate
        span 日期
        el-date-picker(v-model="value1" type="date" @change="formatTime" value-format="yyyy-MM-dd-HH-mm" placeholder="选择日期")
      div.plan
        span
        span.planJH 计划
        textarea.textInput( style="resize:none" v-model="textarea" maxlength="500" placeholder="" @keyup.enter="")
      div.addNote(@click="look")
        p +
      div.state
        span(@click="save").save 保存
        span(@click="cancel").cancel 取消
    div.look(ref="look")
    div.look-box(ref="looks")
      span.establish 查看学习计划
      div(v-for="(item, index) in tableData").examine
        span 日期时间:
        span {{item.classHour}}
        p
          span 计划名称:
          span {{item.name}}
      div.addNote(@click="look") 关闭
    div.clearfix

</template>

<script type="text/ecmascript-6">
  import Message from '../../components/Layout/message'
  export default {
    name: 'StudyPlan',
    data() {
      return {
        value1: '',
        textarea: '',
        serial: 1,
        total: 500, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [
          {
            name: '学习计划',
            content: 'aaaa',
            classHour: '2019-04-12  12:31'
          },
          {
            name: '学习计划',
            classHour: '2019-04-12  12:31'
          },
          {
            name: '学习计划',
            classHour: '2019-04-12  12:31'
          },
          {
            name: '学习计划',
            classHour: '2019-04-12  12:31'
          },
          {
            name: '学习计划',
            classHour: '2019-04-12  12:31'
          },
          {
            name: '学习计划',
            classHour: '2019-04-12  12:31'
          }
        ]
      }
    },
    mounted() {
    },
    methods: {
      look() {
        this.$refs.look.style.display = 'none'
        this.$refs.looks.style.display = 'none'
      },
      formatTime(time) {
        this.value1 = time // date是绑定的值
      },
      save() {
        // myDate.getFullYear() // 获取完整的年份(4位,1970-????)
        // myDate.getMonth() // 获取当前月份(0-11,0代表1月)
        // myDate.getDate() // 获取当前日(1-31)
        // myDate.getHours() // 获取当前小时数(0-23)
        // myDate.getMinutes() // 获取当前分钟数(0-59)
        // myDate.getSeconds() // 获取当前秒数(0-59)
        var myDate = new Date()
        var FullYear = myDate.getFullYear()
        var Month = (myDate.getMonth() + 1)
        var Time = myDate.getDate()
        var Hours = myDate.getHours()
        var Minutes = myDate.getMinutes()
        if (Month < 10) {
          Month = '0' + Month
        }
        if (Time < 10) {
          Time = '0' + Time
        }
        if (Hours < 10) {
          Hours = '0' + Hours
        }
        if (Minutes < 10) {
          Minutes = '0' + Minutes
        }
        var YTD = FullYear + '-' + Month + '-' + Time + ' ' + Hours + ':' + Minutes
        if (this.textarea && this.value1) {
          this.tableData.push({name: this.textarea, classHour: YTD})
          this.$refs.black.style.display = 'none'
          this.$refs.blacks.style.display = 'none'
        } else {
          Message.warning('计划内容不能为空！')
        }
      },
      cancel() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
        this.textarea = null
        this.value1 = null
      },
      studyPlan() {
        this.$refs.black.style.display = 'block'
        this.$refs.blacks.style.display = 'block'
      },
      delStudy() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      deleteRow(index, rows) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          rows.splice(index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleClick(row) {
        console.log(row)
        console.log(11111111)
        this.$refs.look.style.display = 'block'
        this.$refs.looks.style.display = 'block'
      }
    },
    computed: {}
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933

  .centerText
    color #FF9933
    display inline-block

  .center
    height 620px
    position relative

  .paging
    position absolute
    left 50%
    bottom 10px
    margin-left -355px

  .establish
    width 860px
    text-align right
    color #FF9933
    font-size 18px
    span
      margin-left 5px
      cursor pointer

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  /*创建学习计划*/
  .black
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 998
    opacity 0.3
    display none

  .black-box
    width 700px
    background-color #fff
    position fixed
    left:50%
    transform translateX(-50%)
    z-index 999
    display none
    border-radius 10px
    padding 30px 0 0 40px
    box-sizing border-box

  .selectDate
    margin 28px 0 10px 60px
    span
      margin-right 10px
    select
      width 64px
      height 22px
      margin-right 10px

  .textInput
    width 470px
    height 170px
    box-sizing border-box

  .plan
    margin 28px 0 10px 60px
    position relative
    span
      display inline-block
      width 41px
    .planJH
      position absolute
      top 0
      left 0

  .addNote
    cursor pointer
    width 100px
    height 35px
    line-height 35px
    background-color #0099FF
    border-radius 5px
    position relative
    margin 20px auto
    text-align center
    color #fff

  .state
    margin-left 220px
    span
      cursor pointer
      display inline-block
      width 100px
      height 35px
      line-height 35px
      border-radius 5px
      text-align center
      color #fff
      margin-bottom 38px
    .save
      background-color #FF9933
      margin-right 20px
    .cancel
      background-color #999999

  .look
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 998
    opacity 0.3
    display none

  .look-box
    width 700px
    background-color #fff
    position fixed
    left:50%
    transform translateX(-50%)
    z-index 999
    display none
    border-radius 10px
    padding 30px 0 0 40px
    box-sizing border-box

  .examine
    margin 0 auto
    span
      margin-right 12px
    p
      margin 5px 0
</style>
<style lang="stylus" rel="stylesheet/stylus">
  .ulTitle .el-table .cell
    text-align center
</style>
